<template>
  <div class="detailbox border">

    <div class="flexbox">
      <div class="shrinkbox_v2">
        登录账号
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" 
        v-model="editData.userName" placeholder="请输入登录账号"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.userName }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        登录密码
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" :type="isShowPwd?'text':'password'"
        v-model="editData.password" placeholder="请输入登录密码"
        autocomplete="new-password" :disabled="optype == 'edit'">
          <template #suffix>
            <div v-if="optype == 'edit'">

            </div>
            <div v-else style="display: flex;align-items: center;">
              <el-icon v-if="!isShowPwd" @click.stop="isShowPwd = true" 
              style="cursor: pointer;font-size: 18px;"><Hide /></el-icon>
              <el-icon v-else @click.stop="isShowPwd = false" 
              style="cursor: pointer;font-size: 18px;color: #3990CB;"><View /></el-icon>
            </div>
            
          </template>
        </el-input>
        <div v-else class="div_input">
          {{ editData.password }}
        </div>
      </div>
    </div>

    <div class="flexbox">
      <div class="shrinkbox_v2">
        用户名称
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" 
        v-model="editData.nickName" placeholder="请输入用户名称"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.nickName }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        手机号码
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput"
        v-model="editData.phone" maxlength="11" placeholder="请输入手机号码"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.phone }}
        </div>
      </div>
    </div>

    <div class="flexbox">
      <div class="shrinkbox_v2">
        下发设备数
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput" 
        v-model="editData.deviceQuantity" placeholder="请输入下发设备数"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.deviceQuantity }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        是否启用
      </div>
      <div class="contentbox_v2">
        <el-radio-group v-model="editData.isActive" style="margin-left: 10px;">
          <el-radio :label="true" size="small" border>启用</el-radio>
          <el-radio :label="false" size="small" border>禁用</el-radio>
        </el-radio-group>
      </div>
    </div>
    
    <div class="flexbox">
      <div class="shrinkbox_v2">
        上级用户角色
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.uproleId" 
        class="diyselect" clearable placeholder="请选择上级用户角色"
        @change="changeUpRole">
          <el-option
            v-for="(item, index) in upRoles"
            :key="index"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
        <div v-else class="div_input">
          {{ editData.uproleId }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        上级用户
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.parentId" 
        class="diyselect" filterable clearable placeholder="请选择上级用户">
          <el-option
            v-for="(item, index) in upUsers"
            :key="index"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
        <div v-else class="div_input">
          {{ editData.parentId }}
        </div>
      </div>
    </div>
    
    <div class="flexbox">
      <div class="shrinkbox_v2">
        用户角色
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.roleId" 
        class="diyselect" clearable placeholder="请选择用户角色">
          <el-option
            v-for="(item, index) in currentRoles"
            :key="index"
            :label="item.roleName"
            :value="item.id">
          </el-option>
          <!-- <el-option
            label="铺手"
            :value="9">
          </el-option> -->
        </el-select>
        <div v-else class="div_input">
          {{ editData.currentRoleId }}
        </div>
      </div>
      <div class="shrinkbox_v2">
        所在地区
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput"
        v-model="editData.areaName" placeholder="请输入所在地区"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.areaName }}
        </div>
      </div>
      <!-- <div class="shrinkbox_v2">
        上级用户
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput"
        v-model="editData.phone" maxlength="11" placeholder="请输入手机号码"
        autocomplete="new-password"></el-input>
        <div v-else class="div_input">
          {{ editData.phone }}
        </div>
      </div> -->
    </div>

    <div class="flexbox">
      <div class="shrinkbox_v2">
        推荐人
      </div>
      <div class="contentbox_v2">
        <el-select v-if="!feildConfig.isReadonly" v-model="editData.referenceUserId" 
        class="diyselect" filterable clearable placeholder="请选择推荐人">
          <el-option
            v-for="(item, index) in suggestUserList"
            :key="index"
            :label="item.nickName"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <div class="shrinkbox_v2">
        推荐奖励比例
      </div>
      <div class="contentbox_v2">
        <el-input v-if="!feildConfig.isReadonly" class="diyinput"
        v-model="editData.referencePct" placeholder="请输入推荐奖励比例"
        autocomplete="new-password">
        </el-input>
        <div v-else class="div_input">
          {{ editData.referencePct }}
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
  import { ref, inject, defineEmits, nextTick } from 'vue'
  // import { useStore } from 'vuex'
  // 注入全局utils工具js
  const $utils = inject('$utils')
  const editData = ref({})
  const feildConfig = ref({
    isReadonly: false
  })

  // 定义emit方法
  const emit = defineEmits()

  const isShowPwd = ref(false)
  
  const upRoles = ref([])
  const upUsers = ref([])
  const currentRoles = ref([])
  const suggestUserList = ref([])

  const optype = ref('')

  function initData(obj) {
    optype.value = obj.type
    editData.value = obj.data ? obj.data : {}
    feildConfig.value = obj.feildConfig ? obj.feildConfig : feildConfig.value
    if (obj.type == 'add') {
      editData.value.isActive = true
    }
    getRoleList(chooseRole)
    getUserList()
    getAllUser()
  }


  function getUserList () {
    $utils.post({
      url: '/Api/User/GetAll',
      ok: (res) => {
        suggestUserList.value = res.data
      }
    })
  }

  function getRoleList (fn) {
    $utils.post({
      url: '/Api/User/GetRoleList',
      showLoading: true,
      ok: (res) => {
        upRoles.value = res.data
        if (fn) fn()
      }
    })
  }

  function chooseRole () {
    currentRoles.value = upRoles.value
    // let find_data = upRoles.value.find(item => item.id == editData.value.roleId)
    // if (find_data) {
    //   currentRoles.value = [find_data]
    // }
  }

  function changeUpRole (e) {
    currentRoles.value = []
    editData.value.roleId = ''
    if (!e) {
      currentRoles.value = $utils.deepCopy(upRoles.value)
      getAllUser()
    } else {
      for (let i = 0; i < upRoles.value.length; i++) {
        if (parseFloat(upRoles.value[i].id) > parseFloat(e)) {
          currentRoles.value.push(upRoles.value[i])
        }
      }
      getUserByRoleId(e)
    }
  }
  function getUserByRoleId (id) {
    $utils.post({
      url: '/Api/User/GetList',
      params: {
        roleId: id
      },
      showLoading: true,
      ok: (res) => {
        upUsers.value = res.data
      }
    })
  }
  
  function getAllUser () {
    $utils.post({
      url: '/Api/User/GetAll',
      ok: (res) => {
        upUsers.value = res.data
      }
    })
  }



  function submitData() {
    $utils.post({
      url: '/Api/User/Save',
      params: editData.value,
      showLoading: true,
      ok: (res) => {
        emit('close-dialog', false)
      }
    })
  }

  defineExpose({
    initData,
    submitData
  })

</script>

<style scoped>
.saveBtn {
  background-color: #4999FA;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 3px;
  margin-right: 10px;
}
.saveBtn:hover {
  /* background-color: #7BB8FB; */
  opacity: 0.8;
  cursor: pointer;
}
.split_title {
  background-color: #EBEEF5;
  font-size: 16px;
  height: 30px;
  align-items: center;
  font-family: '楷体';
  font-weight: bold;
  display: flex;
  position: relative;
}
.split_title_content {
  flex-grow: 1;
  text-align: center;
}
.split_title_btn {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  align-items: center;
}
.shrinkbox_v2 {
  width: 80px;
}
.diyinput :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyselect :deep(.el-select__placeholder) {
  font-size: 12px;
}
.diyselect :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
  /* pointer-events: none; */
}
.diyselect :deep(.el-input__wrapper:hover){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-input__wrapper:active){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyselect :deep(.el-select__wrapper) {
  box-shadow: unset !important;
}
.diyinput :deep(.el-textarea__inner){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diydatepicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
  font-size: 12px;
}
.diyformitem {
  margin-bottom: 0;
}
.diydatapicker :deep(.el-date-editor){
  width: 100%;
}
.diydatapicker :deep(.el-input__wrapper){
  border: 0 !important;
  outline: none;
  box-shadow: none;
}
.diyinput :deep(.el-input-group__append){
  border: 0 !important;
  outline: none;
  background-color: unset;
  box-shadow: none;
  padding: 0 10px 0 5px;
  font-weight: bold;
  font-size: 16px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/ input[type='number'] {
  -moz-appearance: textfield;
}
</style>